<template>
  <div>
    <el-card class="tree-card">
      <!-- :is-company="true"为true显示公司 -->
      <Treetools :node-data="companyInfo" :is-company="true" @addDepts="addDepts" />
      <hr>
      <!-- el-tree用data接收需要遍历的数据，efault-expand-all默认展开所有节点，props可以自行更改elmui的节点名称，默认是label -->
      <el-tree
        :data="departs"
        :default-expand-all="true"
        :expand-on-click-node="false"
        :props="{label:'name'}"
      >
        <!-- slot里面的data是作用域插槽，返回的是上面传入的data数据,#default是插槽名称，{data}是返回的数据，#是v-slot的简写 -->
        <!-- 三种写法
        1、 <template #default="{data}">
        2、<template v-slot:default="{data}">
        3、<template slot='default' slot-scope="{data}">
         -->
        <template #default="{data}">
          <!-- #default="{data}"也可以写成#default="自定义名称.data" -->
          <!-- 封装成组件（引入注册使用），然后用父传子 -->
          <!-- 父传子三步走：1、父组件对子组件赋值2、设置props3、渲染 -->
          <Treetools :node-data="data" :is-company="false" @addDepts="addDepts" @reloadPage="loadPage" @editDepts="editDepts" />
          <!-- @editDepts="editDepts" ，接收子组件并绑定同名函数修改isshow的状态 -->
        </template></el-tree>
    </el-card>
    <AddDepts ref="addDepts" :is-show-dialog.sync="isShowDialog" :node-data="nodeData" @reloadPage="loadPage" />
  </div>
</template>

<script>
import { getDeptsList } from '@/api/departments'
import Treetools from './components/tree-tools.vue'
import AddDepts from './components/add-depts.vue'
import { listToTreeData } from '@/utils'
export default {
  components: { Treetools, AddDepts },
  data() {
    return {
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      departs: [],
      isShowDialog: false,
      nodeData: {}
    }
  },
  async created() {
    this.loadPage()
  },
  methods: {
    // 封装
    async loadPage() {
    // 可用res打印出来看一下是什么结果，打印出来数据是在depts里面的，所以我们用解构的方法
      const { depts } = await getDeptsList()
      this.departs = listToTreeData(depts, '')
    },
    addDepts(nodeData) {
      this.isShowDialog = true
      this.nodeData = nodeData
    },
    async editDepts(nodeData) {
      // 还需要通知弹窗回显数据，子组件封装一个函数，在父组件调用，通过ref拿到子组件的声明是函数
      await this.$refs.addDepts.getDeptsDetail(nodeData)
      // 父页面接到通知需要弹窗，于是把变量设为true
      this.isShowDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  /* padding: 30px  140px; */
  font-size:14px;
  margin: 30px;
}
</style>
